<template>
  <div class="showExtractResult">
    <el-dialog :visible.sync='showExtractResultPageSync' :before-close="handleCloseDialog" title="查看抽取结果">
      <div class="info-box">
        <el-card shadow="never" class="condition dataCard">
          <div class="review-condition">
            <el-descriptions title="抽取条件" :column="1" border v-if="conditionAndAvoidData">
              <el-descriptions-item label="指定专家"
                                    v-if="conditionAndAvoidData.expertExtractCondition&&conditionAndAvoidData.expertExtractCondition.length>0">
                <el-descriptions class="margin-top" v-for="item in conditionAndAvoidData.expertExtractCondition"
                                 :key="item.expertId" size="small" :column="3" border>
                  <el-descriptions-item label="专家姓名">{{ item.expertName }}</el-descriptions-item>
                  <el-descriptions-item label="身份证号">{{ item.expertIdNumber }}</el-descriptions-item>
                  <el-descriptions-item label="联系电话">{{ item.expertPhone }}</el-descriptions-item>
                </el-descriptions>
              </el-descriptions-item>
              <el-descriptions-item label="其他条件"
                                    v-if="conditionAndAvoidData.otherConditions&&conditionAndAvoidData.otherConditions.length>0">
                <el-descriptions class="margin-top" v-for="(item,index) in conditionAndAvoidData.otherConditions"
                                 :key="index" size="small" :column="3" border>
                  <el-descriptions-item label="专家分类">{{
                      item.categoryName ? item.categoryName : '暂无要求'
                    }}
                  </el-descriptions-item>
                  <el-descriptions-item label="专家职称">{{
                      item.expertTitle ? item.expertTitle : '暂无要求'
                    }}
                  </el-descriptions-item>
                  <el-descriptions-item label="抽取人数">{{ item.extractNumber }}人</el-descriptions-item>
                </el-descriptions>
              </el-descriptions-item>
            </el-descriptions>
          </div>
          <div class="review-avoid">
            <el-descriptions title="回避条件" :column="1" border>
              <el-descriptions-item label="指定回避专家"
                                    v-if="conditionAndAvoidData.expertAvoid&&conditionAndAvoidData.expertAvoid.length>0">
                <el-descriptions class="margin-top" v-for="item in conditionAndAvoidData.expertAvoid" :key="item.expertId"
                                 size="small" :column="3" border>
                  <el-descriptions-item label="专家姓名">{{ item.expertName }}</el-descriptions-item>
                  <el-descriptions-item label="身份证号">{{ item.expertIdNumber }}</el-descriptions-item>
                  <el-descriptions-item label="联系电话">{{ item.expertPhone }}</el-descriptions-item>
                </el-descriptions>
              </el-descriptions-item>
              <el-descriptions-item label="其他条件"
                                    v-if="conditionAndAvoidData.extractAvoidOther&&
                                (conditionAndAvoidData.extractAvoidOther.avoidUnit||conditionAndAvoidData.extractAvoidOther.avoidRegion)">
                <el-descriptions class="margin-top" size="small" :column="1"
                                 v-if="conditionAndAvoidData.extractAvoidOther&&conditionAndAvoidData.extractAvoidOther.avoidUnit"
                                 border>
                  <el-descriptions-item label="回避单位">
                    {{
                      conditionAndAvoidData.extractAvoidOther ? conditionAndAvoidData.extractAvoidOther.avoidUnit : '暂无回避单位信息'
                    }}
                  </el-descriptions-item>
                </el-descriptions>
                <el-descriptions class="margin-top" size="small" :column="1" border
                                 v-if="conditionAndAvoidData.extractAvoidOther&&conditionAndAvoidData.extractAvoidOther.avoidRegion">
                  <el-descriptions-item label="回避地区">
                    {{
                      conditionAndAvoidData.extractAvoidOther ? conditionAndAvoidData.extractAvoidOther.avoidRegion : '暂无回避地区信息'
                    }}
                  </el-descriptions-item>
                </el-descriptions>
              </el-descriptions-item>
            </el-descriptions>
          </div>
        </el-card>
        <el-card shadow="never" class="result dataCard">
          <el-table :data="tableData" border>
            <el-table-column label="专家名" prop="expertName"></el-table-column>
            <el-table-column label="专家分类" prop="categoryName"></el-table-column>
            <el-table-column label="专家职称" prop="expertTitle"></el-table-column>
            <el-table-column label="邀请状态" prop="attendanceFlag">
              <template v-slot="scope">
                <el-tag :type="scope.row.acceptFlag===0?'primary':'success'">{{scope.row.acceptFlag===0?'未接受邀请':'已接受邀请'}}</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="签到状态" prop="acceptFlag">
              <template v-slot="scope">
                <el-tag :type="scope.row.attendanceFlag===0?'danger':'success'">{{scope.row.attendanceFlag===0?'未签到':'已签到'}}</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template v-slot="scope">
                <el-button type="text" size="mini" v-show="scope.row.attendanceFlag===0" @click="urged(scope.row.expertId)">催促专家</el-button>
                <el-button type="text" size="mini" @click="scoreExpert(scope.row.expertId)">评分</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </div>
    </el-dialog>
    <el-dialog title="专家评分"  :visible.sync='scoreSync' :before-close="closeScore" width="30%">
      <div class="score">
        <span>评分:</span>
        <el-rate v-model="score" show-score text-color="#ff9900">
      </el-rate>
      </div>
    <div class="button"><el-button type="primary" @click="commit">提交评分</el-button></div>
    </el-dialog>
  </div>
</template>
<script>
import { GetExtractResultByProjectId, scoreExpert, urgedExpert } from '@/request/ProjectResult/projectResult-api'
import { getConditionAndAvoid } from '@/request/Extract/extractCondition-api'
import store from '@/store'
import { mapState } from 'vuex'

export default {
  computed : {
    listenProjectId(){
      return store.state.ReviewResult.showExtractResultProjectId
    },
    ...mapState({
      showExtractResultPageSync:state => state.ReviewResult.showExtractResultPageSync,
      showExtractResultProjectId:state => state.ReviewResult.showExtractResultProjectId
    })
  },
  data () {
    return {
      conditionAndAvoidData:{},
      tableData:[],
      scoreSync:false,
      score:0,
      scoreExpertId:null
    }
  },methods:{
    async initData (projectId) {
      let res = await GetExtractResultByProjectId(projectId)
      if (res && res.code === 200) {
        this.tableData = res.data
      } else {
        this.$message.error("获取抽取结果失败")
      }

        let avoidRes = await getConditionAndAvoid(projectId)
        if (avoidRes && avoidRes.code === 200) {
          this.conditionAndAvoidData = avoidRes.data
        } else {
          this.$message.error('查询项目抽取条件失败')
        }
    },
    commit(){
      this.$confirm('确定提交专家评分信息吗？', '提示', {
        'confirmButtonText': '确定',
        'cancelButtonText': '取消',
        'type': 'info'
      }).then(async () => {
        const data = {
          expertId: this.scoreExpertId,
          projectId: this.showExtractResultProjectId,
          score: this.score
        }
        let res = await scoreExpert(data)
        if (res&&res.code===200){
          this.$message.success("专家评分成功")
          this.closeScore()
        }else {
          this.$message.error(res.msg?res.msg:'评分失败')
        }
      }).catch((e)=>{

      })
    },
    closeScore(){
      this.scoreExpertId=null
      this.score=0
          this.scoreSync=false
    },
    close(){
      this.conditionAndAvoidData={}
      this.tableData=[]
      store.commit('ReviewResult/changeShowExtractResultProjectId',null)
      store.commit('ReviewResult/changeShowExtractResultPageSync',false)
    },
    urged(expertId){
      this.$confirm('确定催促专家吗？', '提示', {
        'confirmButtonText': '确定',
        'cancelButtonText': '取消',
        'type': 'info'
      }).then(async () => {
        let res = await urgedExpert(this.showExtractResultProjectId,expertId)
        if (res&&res.code===200){
          this.$message.success("已发送信息催促专家")
        }else {
          this.$message.error(res.msg?res.msg:'催促专家失败')
        }
      }).catch((e)=>{

      })
    },
    scoreExpert(expertId){
        this.scoreExpertId=expertId
      this.scoreSync=true
    },
    handleCloseDialog () {
      this.$confirm('确定取消查看抽取结果信息吗？', '提示', {
        'confirmButtonText': '确定',
        'cancelButtonText': '取消',
        'type': 'info'
      }).then(() => {
        this.close()
      }).catch((e) => {
        if (e === 'cancel') {
          if (e === 'cancel') {
          }
        }
      })
    }
  },watch:{
    listenProjectId:{
      immediate:true,
      handler(val,oldval){
        if (val){
          this.initData(val)
        }
      }
    }
  }
}
</script>

<style scoped lang="less">
.showExtractResult{

  .dataCard{
    margin: 20px;
  }
  .review-condition,.review-avoid{
    margin-bottom: 10px;
  }
}
.info-box{
  max-height: 500px;
  overflow-y: scroll;
}
.score{
  display: flex;
  margin-left: 150px;
  font-size: 20px;
  /deep/ .el-rate__icon{
    font-size: 20px;
  }
}
.button{
  text-align: center;
  margin-top: 20px;
}
</style>
